<template>
    <div class="news-detail-page">
        <!-- 新闻详情 -->
        <div class="detail-section">
            <el-card>
                <div class="news-header">
                    <h1>{{ news?.title }}</h1>
                    <div class="news-meta">
                        <span class="publish-time">{{ news?.publishTime }}</span>
                        <span class="news-category">{{ news?.category }}</span>
                    </div>
                    <img v-if="news?.image" :src="news?.image" class="detail-image" />
                </div>

                <div class="detail-content">
                    <div class="news-content" v-html="news?.content"></div>

                    <!-- 标签 -->
                    <div class="news-tags" v-if="news?.tags?.length">
                        <el-tag
                            v-for="tag in news?.tags"
                            :key="tag"
                            size="small"
                            class="tag-item"
                            effect="plain"
                        >
                            {{ tag }}
                        </el-tag>
                    </div>
                </div>
            </el-card>
        </div>

        <!-- 相关新闻推荐 -->
        <div class="recommendation-section">
            <h2>相关新闻</h2>
            <el-row :gutter="30">
                <el-col :xs="24" :sm="12" :md="8" v-for="item in relatedNews" :key="item.id">
                    <el-card class="news-card" @click="goToNews(item)">
                        <img v-if="item.image" :src="item.image" class="news-image" />
                        <div class="news-info">
                            <h3>{{ item.title }}</h3>
                            <p class="news-brief">{{ item.brief }}</p>
                            <div class="news-footer">
                                <span class="publish-time">{{ item.publishTime }}</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();

// 新闻详情数据
const news = ref({
    id: 1,
    title: '企业技术创新成果展示',
    publishTime: '2024-01-15',
    category: '公司新闻',
    image: '/images/news1.svg',
    content: `<p>在最新的技术创新成果展示会上，我们展示了多项具有重大突破性的技术成果。这些创新成果涵盖了人工智能、云计算、大数据等多个领域，展现了公司在技术研发方面的实力。</p>
           <p>通过持续的技术创新，我们为客户提供了更加优质的服务和解决方案，进一步巩固了公司在行业内的领先地位。</p>`,
    tags: ['技术创新', '研发成果', '企业发展']
});

// 相关新闻
const relatedNews = ref([
    {
        id: 2,
        title: '2024年度技术发展规划发布',
        brief: '公司发布新一年度技术发展规划，聚焦AI应用落地',
        image: '/images/news2.svg',
        publishTime: '2024-01-10'
    },
    {
        id: 3,
        title: '成功举办技术交流研讨会',
        brief: '邀请行业专家共同探讨技术发展趋势',
        image: '/images/news3.svg',
        publishTime: '2024-01-05'
    }
]);

// 跳转到其他新闻
const goToNews = (item) => {
    router.push(`/news/${item.id}`);
};

// 获取新闻详情
onMounted(() => {
    const newsId = route.params.id;
    // 这里可以根据newsId从后端获取新闻详情数据
    console.log('获取新闻ID:', newsId);
});
</script>

<style scoped>
.news-detail-page {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.detail-section {
    margin-bottom: 40px;
}

.news-header {
    margin-bottom: 30px;
}

.news-header h1 {
    font-size: 2rem;
    color: #2c3e50;
    margin-bottom: 15px;
}

.news-meta {
    color: #666;
    margin-bottom: 20px;
}

.news-meta span {
    margin-right: 20px;
}

.detail-image {
    width: 100%;
    max-height: 400px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 20px;
}

.news-content {
    line-height: 1.8;
    color: #2c3e50;
}

.news-tags {
    margin-top: 30px;
}

.tag-item {
    margin-right: 10px;
    margin-bottom: 10px;
}

.recommendation-section {
    margin-top: 60px;
}

.recommendation-section h2 {
    font-size: 1.5rem;
    color: #2c3e50;
    margin-bottom: 30px;
}

.news-card {
    margin-bottom: 30px;
    cursor: pointer;
    transition: transform 0.3s;
}

.news-card:hover {
    transform: translateY(-5px);
}

.news-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.news-info {
    padding: 20px;
}

.news-info h3 {
    font-size: 1.2rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.news-brief {
    color: #666;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.news-footer {
    color: #999;
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .news-detail-page {
        margin: 20px auto;
    }

    .news-header h1 {
        font-size: 1.5rem;
    }

    .detail-image {
        max-height: 300px;
    }
}
</style>
